<div id="api-doc" class="mock-body" *ngIf="api && doc">
    <div class="api-doc-item position-relative">
        <h2>{{isEditOpts?'编辑':'添加'}}Mock</h2>
        <div class="position-right">
            <a class="api-call-link mr-1" [routerLink]="['/doc', doc.artifact.id, api.key]">接口文档</a>
            <a [routerLink]="['/doc', doc.artifact.id, api.key, 'mock']">Mock列表</a>
        </div>
        <div class="row mt-1">
            <div class="col col-6">
                <h3 class="display-inline-block mr-1 mb-1">标题</h3>
                <span class="tips ml-1">在列表中展示，可以快速找到对应的mock</span>
                <input type="text" class="input mb-2" [(ngModel)]="title" placeholder="当前Mock的描述">

                <h3 class="display-inline-block mr-1 mb-1">Mock条件</h3>
                <span class="tips">只有请求命中了此条件，才会走本mock配置</span>
                <app-doc-mock-condition-rest [api]="api" [doc]="doc" [condition]="condition"></app-doc-mock-condition-rest>

                <h3 class="mt-2 mb-1">Mock配置</h3>
                <div class="tab" id="response-tab">
                    <ul>
                        <li [class.active]="mockTypeTabStatus == 'config'" (click)="setMockTypeTabStatus('config')">配置</li>
                        <li [class.active]="mockTypeTabStatus == 'direct'" (click)="setMockTypeTabStatus('direct')">直接输出</li>
                    </ul>
                    <div class="tab-content" [class.active]="mockTypeTabStatus == 'config'">
                        <div class="form-row mock-code">
                            <app-doc-mock-rest-config [mockConfigItem]="mockConfigItem" [loopedEntityMap]="loopedEntityMap"></app-doc-mock-rest-config>
                        </div>
                    </div>
                    <div class="tab-content" [class.active]="mockTypeTabStatus == 'direct'">
                        <div class="alert alert-warning">
                            直接输出时，不会检查是否合法json格式，非json字符串预览时也有可能会失败！
                            <button class="btn lean-btn" (click)="showDirectOutputDemo()">demo</button><span class="tips">注意，点击时会覆盖下面内容！</span>
                        </div>
                        <textarea class="input" [(ngModel)]="jsonResponse"></textarea>
                    </div>
                </div>
            </div>
            <div class="col col-6 position-relative">
                <div class="mock-view-box" appScrollHold>
                    <h3 class="mb-1">Mock数据预览</h3>
                    <div id="mock-review" class="json">
                        <app-doc-mock-review [response]="previewStr"></app-doc-mock-review>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="save-opts">
    <button class="btn mr-1" (click)="preview()">预览</button>
    <button class="btn primary-btn" (click)="save()">保存</button>
</div>
